<template>
  <h1>基本用法</h1>
  <el-row class="mb-4">
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
  </el-row>
  <h1>结合 el-icon 使用</h1>
  <el-row class="mb-4">
  <p>
    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
    secords, you can also override this
  </p>
  </el-row>
  <el-row>
  <el-icon :size="20">
    <Edit />
  </el-icon>
  <el-icon color="#409EFC" class="no-inherit">
    <Share />
  </el-icon>
  <el-icon>
    <Delete />
  </el-icon>
  <el-icon class="is-loading">
    <Loading />
  </el-icon>
  <el-button type="primary">
    <el-icon style="vertical-align: middle">
      <Search />
    </el-icon>
    <span style="vertical-align: middle"> Search </span>
  </el-button>
  </el-row>
  <h1>直接使用 SVG 图标</h1>
  <el-row class="mb-4">
    <!-- 由于SVG图标默认不携带任何属性 -->
    <!-- 你需要直接提供它们 -->
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <Share style="width: 1em; height: 1em; margin-right: 8px" />
    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" />
  </el-row>
  <h1>API</h1>
  <el-row class="mb-4">
    <b>属性</b>
    <table width="100%">
        <tr>
            <th width="15%">属性名</th>
            <th>说明</th>
            <th width="15%">类型</th>
            <th width="15%">默认值</th>
        </tr>
        <tr v-for="item in attrs">
            <td>{{item.name}}</td>
            <td>{{item.desc}}</td>
            <td>{{item.type}}</td>
            <td>{{item.defaultValue}}</td>
        </tr>
    </table>
    
    <b>Slots</b>
    <table width="100%">
      <tr>
          <th width="30%">名称</th>
          <th>说明</th>
      </tr>
      <tr v-for="item in attrs">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
      </tr>
    </table>
  </el-row>

</template>

<script setup>
import {
  Edit,Share,Delete,Loading,Search
} 
from '@element-plus/icons-vue' 
</script>

<script>
export default{
    data(){
        return {
            size: 20,
            color: 'red',
            attrs:[{
              "name":"color",
              "desc":"svg 的 fill 颜色",
              "type":"string",
              "defaultValue":"继承颜色"
            },{
              "name":"size",
              "desc":"SVG 图标的大小，size x size",
              "type":"number/string",
              "defaultValue":"继承字体大小"
            }],
            slots:[{
              "name":"default",
              "desc":"自定义默认内容"
            }]
        }
    }
}
</script>
